<template>
	<view>
		<u-sticky >
			<u-search placeholder="商品编码" :clearabled="true" v-model="goodsNumber" border-color="#606266" @custom="getBHByGoodsNumber" v-if="false" ></u-search>
		</u-sticky>
	
		<u-card padding="16" v-for="(item,index) in dataList" :key="index" >
			<view class="" slot="head">
				<view class="wrap">
					
					<u-row>
						<u-col span="9" text-align="left">
							<view class="weikaishi6">
								<span><u-icon name="order" size="26" labelSize="13px" labelColor="#000000" label=""></u-icon>{{item.orderOutNumber}}</span>
							</view>
						</u-col>
						<u-col span="3" text-align="left">
							<view class="weikaishi6">
								 <u-tag :text="item.orderType" type="warning" plain shape="circle"></u-tag>
							</view>
						</u-col>
						
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span style="color:dodgerblue;"><u-icon name="home" size="26" labelSize="13px" labelColor="#dodgerblue" label="要货门店"></u-icon>：{{item.getUnit}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span style="color:dodgerblue;"><u-icon name="map" size="26" labelSize="13px" labelColor="#dodgerblue" label="发货仓库"></u-icon>：{{item.setWarehouse}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span><u-icon name="man-add" size="26" labelSize="13px" labelColor="#000000" label="制单人"></u-icon>：{{item.createUserName}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span><u-icon name="calendar" size="26" labelSize="13px" labelColor="#000000" label="制单时间"></u-icon>：{{item.createTime}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span><u-icon name="car" size="26" labelSize="13px" labelColor="#000000" label="配送日期"></u-icon>：{{item.peisongTime}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span style="color: crimson;"><u-icon name="red-packet" size="26" labelSize="13px" labelColor="#crimson" label="金额"></u-icon>：{{orderAmount}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span><u-icon name="bookmark" size="26" labelSize="13px" labelColor="#000000" label="备注"></u-icon>：{{item.goodsNumber}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			
		</u-card>
		
		
		<view class="">
			<view >
				<u-row>
					<u-col span="9" text-align="left">
						<view class="weikaishi6">
							<u-input v-model="soreType" type="select" :border="border" @click="soreTypeShow = true" />
							<u-action-sheet :list="soreTypeList" v-model="soreTypeShow" @click="actionSheetCallback"></u-action-sheet>
						</view>
					</u-col>
					<u-col span="3" text-align="right" v-if="dataList[0].orderState == '待提交'">
						<view class="weikaishi6" style="color:deepskyblue" >
							<u-icon name="plus-circle" ></u-icon><u-button type="primary" size="mini" plain	@click="addGoods" >添加商品</u-button>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		
		
		<u-card padding="16" v-for="(item,index) in goodsList" :key="item.goodsPcode69"  >
			<view class="" slot="head" @longpress="longpressCard(item)">
				<view class="wrap">
					<u-row>
						<u-col span="9" text-align="left">
							<view class="weikaishi6">
								<span style="font-size: 15px;">{{item.goodsName}}</span>
							</view>
						</u-col>
						<u-col span="3" text-align="right">
							<view class="weikaishi6">
								<span style="color: red;"><u-icon name="rmb" size="26" labelSize="13px" labelColor="#000000" ></u-icon>{{Number(item.goodsPrice) * Number(item.psNum) }} </span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span>规格：{{item.goodsSpecs}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span style="color:dodgerblue;">编号：{{item.goodsNumber}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="weikaishi6">
								<span style="color:dodgerblue;">条码：{{item.goodsPcode69}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="8" text-align="left">
							<view class="weikaishi6">
								<span style="color: red;"><u-icon name="rmb" size="26" labelSize="13px" labelColor="#000000" ></u-icon>{{item.goodsPrice}}</span>
							</view>
						</u-col>
						<u-col span="4" text-align="right" v-if="dataList[0].orderState == '待提交'">
							<view class="weikaishi6">
								<u-number-box :min="1"  v-model="item.psNum" @change="valChange(item)"></u-number-box>
							</view>
						</u-col>
					</u-row>
					
				</view>
			</view>
			
		</u-card>
		<u-row>
			<u-col span="6" text-align="center">
				<view class="weikaishi6"  >
					<u-button type="primary" v-if="this.goodsList.length > 0  && this.dataList[0].orderState == '待提交'" @click="submitOrder()">确 定</u-button>
					<u-button type="primary" v-if="this.goodsList.length > 0  && this.dataList[0].orderState == '待审核'" @click="approvalOrder('1')">同 意</u-button>
					<u-button type="primary" v-if="this.goodsList.length > 0  && this.dataList[0].orderState == '待支付'" @click="paymentOrder()">支 付</u-button>
				</view>
			</u-col>
			<u-col span="6" text-align="center">
				<view class="weikaishi6">
					<u-button type="success" @click="backMdbh" v-if="this.goodsList.length > 0  && (this.dataList[0].orderState == '待提交' || this.dataList[0].orderState == '待支付')">返 回</u-button>
					<u-button type="error" v-if="this.goodsList.length > 0  && this.dataList[0].orderState == '待审核'" @click="approvalOrder('0')">拒 绝</u-button>
				</view>
			</u-col>
		</u-row>
		
		
		<view>
			<u-calendar v-if="false"  v-model="show" mode="date" max-date="2070-01-01" @change="change" ></u-calendar>
		</view>
		
		<view>
				<u-modal v-model="showModal" :content="content" @confirm="confirm" @cancel="cancel" :show-cancel-button="showCancelButton"	 confirm-text="确认" cancel-text="取消">
					
				</u-modal>
		</view>
		<!-- <view>
			<u-picker mode="time" v-model="show2" :default-time="endTime" :params="params" @confirm="confirm2"></u-picker>
		</view> -->
		<!-- <u-popup v-model="popupShow" mode="center" closeable width="660rpx" height="720rpx" border-radius="10">
			<view class="u-text-center u-m-t-20 weikaishi3"><u-icon name="order" size="30" labelSize="15px" labelColor="#000000" label="拣货明细"></u-icon></view>
			<u-card padding="16" v-for="(item,index) in dataList2" :key="index">
				<view class="" slot="head">
					<view class="wrap">
						<u-row>
							<u-col span="12">
								<view class="weikaishi3 lanse">
									<span>{{item.storageGoodsname}},{{item.goodsNo}}</span>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="" slot="body">
					<view class="wrap">
						<u-row>
							<u-col span="5" text-align="center">
								<view class="weikaishi4 u-line-1 u-m-t-10">
									<span>批次</span>
								</view>
							</u-col>
							<u-col span="3" text-align="center">
								<view class="weikaishi4 u-line-1 u-m-t-10">
									<span>应拣</span>
								</view>
							</u-col>
							<u-col span="4" text-align="center">
								<view class="weikaishi4 u-line-1 u-m-t-10">
									<span>实拣</span>
								</view>
							</u-col>
						</u-row>
						<u-row v-for="(item1,index1) in item.list" :key="item1.id">
							<u-col span="5" text-align="center">
								<view class=" u-m-t-10 weikaishi4 huanghang">
									<span>{{item1.storageBatchnumber}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="center" v-if="item1.storageNumber == item1.realNum">
								<view class=" u-m-t-10 weikaishi4 yiwancheng">
									<span>{{item1.storageNumber}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="center" v-else>
								<view class=" u-m-t-10 weikaishi4">
									<span>{{item1.storageNumber}}</span>
								</view>
							</u-col>
							<u-col span="4" text-align="center" v-if="item1.storageNumber == item1.realNum">
								<view class=" u-m-t-10 weikaishi4 yiwancheng">
									<span>{{item1.realNum}}</span>
								</view>
							</u-col>
							<u-col span="4" text-align="center" v-else>
								<view class=" u-m-t-10 weikaishi4">
									<span>{{item1.realNum}}</span>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</u-card>
		</u-popup> -->
		<view>
			<u-toast ref="uToast" />
		</view>
		
	</view>
</template>
<script>

	export default {
		data() {
			return {
				setMentiontime:'',
				dataList: [],
				dataList2: [],
				show:false,
				show2:false,
				soreType:'',
				soreTypeShow:false,
				popupShow:false,
				areanumberlist:[],
				orderOutputNumber:'',
				orderType:'',
				customerId:'',
				setWarehouseId:'',
				goodsNumber:'',
				pageNo:1,
				border:true,
				hasMore: true,
				orderAmount:0,
				content:'确定要移除该商品吗？',
				showModal:false,
				selectItem :{},
				showCancelButton:true,
				orderState:'',
				getUnitId:'',
				peisongTime:'',
				getUnitId:'',
				goodsList:[{
					goodsName: '盐津铺子31度鲜鳕鱼豆腐原味',
					goodsNumber:'32010262',
					goodsPcode69:'6926104954053',
					goodsPrice:50.000,
					goodsSpecs:'1*2包*2.5kg',
					psNum:1
					}
				],
				list2: [{
							name: '关注'
						}, {
							name: '推荐',
							badge: {
								isDot: true
							}
						}, {
							name: '电影',
							badge: {
								value: 5,
							}
						}, {
							name: '科技'
						}, {
							name: '音乐'
						}, {
							name: '美食'
						}, {
							name: '文化'
						}, {
							name: '财经'
						}, {
							name: '手工'
						}],
				soreTypeList: [
					{
						text: '默认排序'
					},
					{
						text: '添加顺序升序'
					},
					{
						text: '数量升序'
					},
					{
						text: '数量降序'
					}
				],
			}
		},
		onLoad(open) {
			console.log(11111111)
			console.log(open)
			this.orderOutputNumber = open.orderOutNumber
			this.orderType = open.orderType
			this.getUnitId = open.getUnitId
			this.customerId = open.customerId
			this.setWarehouseId = open.setWarehouseId
			this.peisongTime = open.peisongTime
			this.getUnitId = open.getUnitId
			this.dataList = [open]
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			this.refresh()
			
			
		},
		filters:{
			// formatDate(value) {
			//       if (!value) return ''; // 如果没有值，返回空字符串
			//       const date = new Date(value); // 将日期字符串转换为 Date 对象
			//       const year = date.getFullYear(); // 获取年份
			//       const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，+1 是因为月份从 0 开始
			//       const day = String(date.getDate()).padStart(2, '0'); // 获取日期
			//       return `${year}-${month}-${day}`; // 返回格式化的日期字符串
			//     }
		},
		onShow() {
			this.refresh()
		},
		onPullDownRefresh() {
			// this.refresh()
			uni.stopPullDownRefresh()
		},
		
		onPullDownRefresh() {
			// this.refresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			uni.showLoading({
				title: '加载中'
			})
			if (this.hasMore) {
				this.pageNo++ 
				setTimeout(() => {
					this.getBhList()
					uni.hideLoading()
				}, 500)
			} else {
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '已经到低了哦',
						duration: 2000
					});
				}, 500)
			}
		},
		
		methods: {
			actionSheetCallback(index) {
				console.log(index)
				this.soreType = this.soreTypeList[index].text;
			},
			valChange(item) {
				this.orderAmount = 0
				this.goodsList.forEach((item, index) => {
				this.orderAmount +=  Number(item.goodsPrice) * Number(item.psNum)
				});
			},
			// 提交订单
			submitOrder(){
				console.log(this.orderOutputNumber)
				console.log(this.goodsList)
				this.$http.post('/rest/mdbh/submitOrder',this.goodsList,{
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					console.log(res)
					if(res.data.success){
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success'
						})
					}
					this.$Router.replace({
						name: 'mdBh'
					})
				})
			},
			//审批订单
			approvalOrder(value){
				console.log(value)
					console.log(this.orderOutputNumber)
					console.log(this.goodsList)
					if(value == 0){
						this.orderState = '待提交'
					}else if(value == 1){
						this.orderState = '待支付'
					}
					this.$http.post('/rest/mdbh/approvalOrder',{
						},{
							params: {
								orderOutNumber: this.orderOutputNumber,
								orderState:this.orderState
							},
							header: {
								'Authorization' :uni.getStorageSync('token'),
							}
						}).then(res => {
						console.log(res)
						if(res.data.success){
							this.$refs.uToast.show({
								title: '操作成功',
								type: 'success'
							})
						}
						this.$Router.replace({
							name: 'mdBh'
						})
					})
			},
			//支付订单
			paymentOrder(){
				this.$http.post('/rest/mdbh/paymentOrder',{
					},{
						params: {
							orderOutNumber: this.orderOutputNumber,
							orderState:'已支付',
							getUnitId:this.getUnitId,
							orderAmount:this.orderAmount,
							orderType:this.orderType,
							customerId:this.customerId,
							setWarehouseId:this.setWarehouseId,
							peisongTime:this.peisongTime
							
						},
						header: {
							'Authorization' :uni.getStorageSync('token'),
						}
					}).then(res => {
					console.log(res)
					if(res.data.success){
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success'
						})
						this.$Router.replace({
							name: 'mdBh'
						})
					}
					if(!res.data.success){
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error'
						})
					}
					
				})
			},
			longpressCard(item1){
				
				console.log(item1)	
				this.selectItem = item1
				
				if(this.dataList[0].orderState != '待提交'){
					this.showModal = false
					return
				}
				this.showModal = true
				
							
				// const index = this.goodsList.findIndex(item => item === item1);
				// if (index !== -1) {
				//     this.goodsList.splice(index, 1);
				// }
				// console.log(this.goodsList)
			},
			confirm(){
				console.log(this.selectItem)
				const index = this.goodsList.findIndex(item => item === this.selectItem);
				if (index !== -1) {
				    this.goodsList.splice(index, 1);
				}
				console.log(this.goodsList)
			},
			cancel(){
				
			},
			backMdbh(){
				this.$Router.replace({
					name: 'mdBh'
				});
			
			},
			addGoods(){
				this.$Router.replace({
					name: 'mdBhAddGoods',
					params: {
						orderOutputNumber: this.orderOutputNumber
					},
				});
			},
			//补货
			toBh(item){
				console.log(item)
				this.$Router.replace({
					name: 'replenishGoods',
					params: {
						id: item.id
					},
				});
			},
			clickCard(item){
				console.log(item)
			},
			getBHByGoodsNumber(value){
				 console.log(123)
				 console.log(value)
				 let dataList1 = [];
				for(let item of this.dataList) {
					if(item.goodsNumber.includes(value)){
						dataList1.push(item)
					}
				}
				this.dataList = dataList1
				if(value == null || value == '' ){
					// this.refresh()
				}
			},
			checkboxChange(e){
				console.log(e)
			},
			refresh(){
				this.pageNo = 1
				this.hasMore = true
				this.goodsList = [];
				uni.showLoading({
					title: '加载中...'
				})
				this.getGoodsList()
				uni.hideLoading()
			},
			
			
			getGoodsList(){
				
				this.$http.post('/rest/mdbh/goodsList',{
				},{
					params: {
						orderOutputNumber: this.orderOutputNumber,
						page: this.pageNo,
						limit: 5
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					console.log(res)
					if (this.pageNo == 1) {
						this.goodsList = res.data.data
					} else {
						this.goodsList = this.dataList.concat(res.data.data)
					}
					console.log(this.goodsList)
					this.orderAmount = 0
					this.goodsList.forEach((item, index) => {
					
					this.orderAmount +=  Number(item.goodsPrice) * Number(item.psNum)
					});
					

					// this.orderCount = res.data.count
					this.hasMore = this.pageNo * 5 < res.data.count
					
				})
			},
		},
	}
</script>
<style lang="scss">
	.huanhang{
		word-break:break-all;
	}
</style>